import yesmola from "./index.module.css"
import React, { Component } from 'react'
import 'antd/dist/antd.css';

import {Link} from "react-router-dom"

import {UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

import { Layout, Menu } from 'antd';
const { Header, Content, Footer, Sider } = Layout;

const { SubMenu } = Menu;



export default class Homecenter extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    render() {
        return (
            <div id={yesmola.box}>
                <Layout>
                    <Sider
                        style={{
                            overflow: 'auto',
                            height: '100vh',
                            position: 'fixed',
                            left: 0,
                            top: 10
                        }}
                    >
                        <div className="logo" />
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
                            <Menu.Item key="1" icon={<UserOutlined />}>
                                nav 1
                            </Menu.Item>
                            <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1" >
                                <Menu.Item key="1">
                                    <Link to='/Left'> Left </Link> 
                                </Menu.Item>
                                <Menu.Item key="2">option2</Menu.Item>
                                <Menu.Item key="3">option3</Menu.Item>
                                <Menu.Item key="4">option4</Menu.Item>
                            </SubMenu>
                            <Menu.Item key="5" icon={<LaptopOutlined />}>
                                nav 2
                            </Menu.Item>
                            <Menu.Item key="6" icon={<NotificationOutlined />}>
                                nav 3
                            </Menu.Item>
                            <Menu.Item key="7" icon={<NotificationOutlined />}>
                                nav 4
                            </Menu.Item>
                            <Menu.Item key="8" icon={<NotificationOutlined />}>
                                nav 5
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout className="site-layout" style={{ marginLeft: 200,minHeight: '100vh' }}>
                        <Header className="site-layout-background" style={{ padding: 0 }} />
                        <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
                            <div className="site-layout-background" style={{ padding: 24, textAlign: 'center'}}>
                                {/* <Route path="/Login" component={Login} /> */}
                                内容展示区
                                <div>内容展示区</div>
                            </div>
                        </Content>
                        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                    </Layout>
                </Layout>
            </div>
        )
    }
}
